<template>
	<view class="index_pages" style="padding: 20rpx;" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20240102/3ca9906e8f012aab0c.png)'}" > 
		
		<view  class="zupus_item flex ali-c"  style="border-bottom: 1rpx solid #BDBDBD;">
			<view style=" width: 100%;height: 55rpx; align-items: center; display: flex;">
				<scroll-view ref="tabbar1"   style=" flex-direction: row;width: 100%;" scroll-x :scroll="false" :show-scrollbar="false" >
					<view style=" display: flex;  justify-content:space-around; align-items: center;">
						<view v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id"  :data-id="index" :data-current="index" >
							<text class="title"  v-if="nav_active != tab.id" style="font-size: 35rpx; " @click="selectfun(index)" >{{tab.title}}</text>
							<text class="title"  v-if="nav_active == tab.id" style="font-size: 35rpx; font-weight: bold;" @click="selectfun(index)">{{tab.title}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<view class="zupus_item flex ali-c"  style="display: flex; flex: 1; background-color: #fff;">
			<swiper style="width: 100%; height: 80vh;" :current-item-id="nav_active" circular :disable-touch="true"  >
				<swiper-item   v-for="(item,index) in tabBars" :key="item.id" :item-id="item.id">  
					<scroll-view  scroll-top="0" scroll-y="true" class="scroll-Y" style="height: 80vh;" @scrolltolower="upper">
						<view  @tap="tabFamily(item)"  v-if="listdata.total != 0"  v-for="(item,index1) in listdata.data" :key="index1"     :style="{backgroundColor:nav_active!='id3'?'#fff8f4':'#f0f0f0'}"  style="padding: 15rpx; border-radius: 15rpx; margin-top: 25rpx;display: flex;" >

								<view class="itemimgss">
									<image class="zpimgs" :style="{backgroundImage:'url('+photo_cdn+'zpupload/static/zupu/pushu.png)'}" mode=""></image>
									<view class="family_name">{{item.title || item.family_name+'氏家谱'}}</view>
								</view>
								
								<view class="zupus_item_info flex1">
									<view class="zupu_names">{{item.title || item.family_name+'氏家谱'}}</view>
									<view class="flex ali-c jus-b fqr_text">
										<view class="">发起人：{{item.nickname}}</view>
									</view>
									<view class="create_time">创建日期：{{item.createtime  }}</view>
									<view class=" " style="display: flex; justify-content: space-between;margin-top: 25rpx;">
										<view class="">分佣比例：{{item.rate*100}}%</view>
										<view class="">类型：{{item.fatype == '1' ? '家谱' : '族谱'}}</view>
									</view>
								</view>
						</view>
						<view class="" v-if="listdata.total == 0"   >
							<view class="" style="font-size: 45rpx; font-weight: bold;display: flex; justify-content: center;">
								暂无数据
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {getDonationList,getDonationByInfo,carateDonation , updateDonation} from "@/utils/api/zupu.js" 
	import {getPagesUser} from "@/utils/api/user.js" 
	import {getDailiList} from "@/utils/api/daili.js" 
	import config from "@/utils/config.js";
	let {photo_cdn} = config.baseUrl;
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components:{
		},
		data() {
			return {
				photo_cdn,
				nav_active:'type0',
				tabBars:null,
				WinHeight:500,
				list: null,
				listdata:{
					data:null
				},
				id:null
			}
		},
		computed: {
		},
		onLoad(Option) {
			this.id = Option.id;
			this.getByList()
		},
		onShow() {
		},
		onReady() {

		},
		methods: {
			zhuanfa(e){
				console.log(e)
				uni.navigateTo({
					url: '/pagesim/address-list/group-chat?id='+e.id
				});
			},
			getByList(){
				this.list =  null;
				// this.listdata = null;
				getPagesUser().then(res=>{ 
					console.log(res)
					this.tabBars = res.data.list.daili ;
					this.nav_active = 'type0'
					getDailiList(1,{'type':this.nav_active}).then(res=>{
						this.listdata  = res.data.list;
						this.tabBars['type0'].list =  res.data.list;
					})
				})
			},
			//跳转
			jump(e){
				console.log(e)
				uni.navigateTo({
					url:e
				})
			},
			//切换族谱
			tabFamily(item){
				uni.navigateTo({
					url:`/pages/zupu/familytrees/familytrees?family_id=${item.id}`
				})
			},
			upper: function(e) {
				console.log(e)
				if(this.listdata.current_page == this.listdata.last_page){
					return;
				}else{
					
					let  num = this.listdata.current_page  + 1 ;
					getDailiList( num ,{'type':this.nav_active}).then(res=>{
						console.log(res)
						let lists = res.data.list.data;
						let listdatas = res.data.list;
						for(var i=0;i<lists.length;i++){
							this.listdata.data.push(lists[i]);
						}
						this.listdata.current_page = listdatas.current_page;
						this.listdata.last_page = listdatas.last_page;
						this.listdata.per_page = listdatas.per_page;
						this.listdata.total = listdatas.total;
						// this.listdata  = res.data.list;
						this.tabBars[this.nav_active].list =  this.listdata;
					})
				}
			},
			selectfun(e){
				console.log(e)
				let indexkey = e ;
				let that = this;
				console.log(indexkey)
				console.log(that.nav_active)  
				if(that.nav_active == indexkey){
					return;
				}
				that.nav_active = indexkey;
				console.log(that.tabBars)
				that.listdata =  that.tabBars[indexkey].list
				if(that.listdata.length  ==  0){
					getDailiList(1,{'type':that.nav_active}).then(res=>{
						console.log(res)
						that.listdata  = res.data.list;
						that.tabBars[that.nav_active].list =  res.data.list;
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	
	.zupus_item_info{
		margin-left: 36rpx;
	
		.zupu_names{
			color: #000000;
			font-size: 30rpx;
			font-weight: bold;
			line-height: 1;
		}
		.f	qr_text{
			margin-top: 20rpx;
			color: #000000;
			font-size: 24rpx;
			line-height: 1;
		}
		.rprs_text{
			margin-top: 20rpx;
			color: #000000;
			font-size: 24rpx;
			line-height: 1;
		}
		.create_time{
			margin-top: 40rpx;
			color: #000000;
			font-size: 24rpx;
			line-height: 1;
		}
		.editzp{
			width: 40rpx;
			height: 40rpx;
			z-index: 2;
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}
		.contactccr{
			color: #FFFFFF;
			background-color: $themecolor;
			display: inline-block;
			padding: 10rpx 20rpx;
			border-radius: 14rpx;
		}
		.item_info_foot{
			
			margin-top: 16rpx;
			.tximgs{
				width: 28rpx;
				height: 28rpx;
				border-radius: 50%;
			}
			.inheritors{
				margin-left: 20rpx;
				color: #AE8949;
				font-size: 24rpx;
				.tt_line{
					text-decoration: underline;
				}
			}
			.punumtext{
				margin-left: auto;
				color: #999999;
				font-size: 24rpx;
			}
		}
		
	}
	.itemimgss{
		width: 146rpx;
		height: 220rpx;
		position: relative;
		.family_name{
			background-color: #C02E36;
			padding: 5rpx;
			border-radius: 25rpx;
			z-index: 2;
			position: absolute;
			top: 15%;
			right: 5%;
			letter-spacing: 4rpx;
			writing-mode: vertical-lr;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			font-size: 16rpx;
		}
		
		.zpimgs{
			width: 146rpx;
			height: 220rpx;
			background-size: 100% 100%;
		}
		

	}
	.jdt {
		margin-left: 100px;
	}
	 
	.jd_title {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	 
	.jdbar {
		background: rgb(227, 227, 227);
		height: 10px;
		width: 100%;
	}
	 
	.jdper {
		height: 10px;
		background: #f30;
		max-width: 100%;
		width: 100%;
		position: relative;
		animation: aniBar 1s;
	}
	 
	.jdper::before {
		position: absolute;
		content: attr(per);
		background: #f30;
		padding: 2px 5px;
		border-radius: 2px;
		font-size: 12px;
		right: -15rpx;
		top: -30px;
		color: #fff;
		transform: translateX(50%); 
	}
	 
	.jdper::after {
		content: "";
		width: 10px;
		height: 10px;
		display: inline-block;
		background: #f30;
		position: absolute;
		right: 0;
		top: -18px;
		z-index: -1;
		border-radius: 2px;
		transform: translateX(50%) rotate(45deg);
	}
	 
	@keyframes aniBar {
		0% {
			width: 0;
		}
	 
		100% {
			width: 100%;
		}
	}
	.uni-ellipsis-1 {
		lines: 1;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	
	.zupus_item{
		// padding: 18rpx 25rpx;
		margin-bottom: 20rpx;
		width: 710rpx;
		// height: 256rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		position: relative;
		&.active{
			border: $themecolor 2rpx solid;
		}
		.peag{
			position: absolute;
			top: 0;
			right: 30rpx;
			.people_flag{
				width: 50rpx;
				height: 80rpx;			
			}
			.peag_text{
				font-size: 32rpx;
				position: absolute;
				top: 10rpx;
				right: 10rpx;
				color: #FFFFFF;
			}
		}
		.itemimgss{
			width: 146rpx;
			height: 220rpx;
			position: relative;
			.family_name{
				z-index: 2;
				position: absolute;
				top: 16rpx;
				left: 98rpx;
				writing-mode: vertical-lr;
				// font-size: 30rpx;
				height: 144rpx;
				text-align: center;
			}
		}
		.zpimgs{
			width: 146rpx;
			height: 220rpx;
			background-size: 100% 100%;
		}
		.zupus_item_info{		
			margin-left: 36rpx;
	
			.zupu_names{
				color: #000000;
				font-size: 30rpx;
				font-weight: bold;
				line-height: 1;
			}
			.fqr_text{
				margin-top: 20rpx;
				color: #000000;
				font-size: 24rpx;
				line-height: 1;
			}
			.rprs_text{
				margin-top: 20rpx;
				color: #000000;
				font-size: 24rpx;
				line-height: 1;
			}
			.create_time{
				margin-top: 40rpx;
				color: #000000;
				font-size: 24rpx;
				line-height: 1;
			}
			.editzp{
				width: 40rpx;
				height: 40rpx;
				z-index: 2;
				position: absolute;
				right: 100rpx;
				top: 30rpx;
			}
			.contactccr{
				color: #FFFFFF;
				background-color: $themecolor;
				display: inline-block;
				padding: 10rpx 20rpx;
				border-radius: 14rpx;
			}
			
			
			.item_info_foot{
				margin-top: 16rpx;
				.tximgs{
					width: 28rpx;
					height: 28rpx;
					border-radius: 50%;
				}
				.inheritors{
					margin-left: 20rpx;
					color: #AE8949;
					font-size: 24rpx;
					.tt_line{
						text-decoration: underline;
					}
				}
				.punumtext{
					margin-left: auto;
					color: #999999;
					font-size: 24rpx;
				}
			}
			
		}
	} 
	
	@import "./daili.scss";
</style>